// 通过回调函数来返回最终的值
function addInputCheckboxtBox(callBackFun, lableName, checkboxData = [{ 'key(键)': 'value(值)' }], required = false) {
    //创建
    return createInputCheckboxtBox(callBackFun, lableName, checkboxData, required);
}

//当最后获取值的时候，直接点提交，需要检查，必填的需要进行提示
function checkInputCheckboxtBox(inputCheckboxBoxEl) {
    // 因为可能会有多个inputCheckboxBox，所以要单独处理
    if (inputCheckboxBoxEl.firstElementChild.classList.contains('required-flag')) {
        let isSelect = false;
        [...inputCheckboxBoxEl.lastElementChild.firstElementChild.children].map(v => {
            if (v.classList.contains('check')) {
                isSelect = true;
            }
        });
        if (!isSelect) {
            // 必填没选择，进行提示
            inputCheckboxBoxEl.lastElementChild.firstElementChild.classList.add('prompt');
            inputCheckboxBoxEl.lastElementChild.firstElementChild.classList.add('luminescence');
            inputCheckboxBoxEl.lastElementChild.lastElementChild.style.visibility = 'visible';
            // 检验不通过
            return false;
        }
        // 检验通过
        return true;
    }
    return true;
}

function createInputCheckboxtBox(callBackFun, lableName, checkboxData, required) {
    const inputCheckboxBoxEl = document.createElement('div');
    inputCheckboxBoxEl.className = 'input-checkbox-box';
    const lableEl = document.createElement('div');
    lableEl.className = 'label-style';
    lableEl.innerText = lableName;
    if (required) {
        lableEl.classList.add('required-flag');
    }
    const contentEl = document.createElement('div');
    contentEl.className = 'content-style';
    const mianBoxEl = document.createElement('div');
    mianBoxEl.className = 'input-checkbox-main-box';
    checkboxData.forEach(v => {
        let value = Object.values(v)[0];
        const checkboxBoxEl = document.createElement('div');
        checkboxBoxEl.className = 'input-checkbox-main-checkbox-box';
        const checkboxDotBoxEl = document.createElement('div');
        checkboxDotBoxEl.className = 'input-checkbox-main-checkbox-dot-box';
        const checkboxTextEl = document.createElement('span');
        checkboxTextEl.className = 'input-checkbox-main-checkbox-text-box';
        checkboxTextEl.innerText = value;
        checkboxBoxEl.appendChild(checkboxDotBoxEl);
        checkboxBoxEl.appendChild(checkboxTextEl);
        checkboxBoxEl.addEventListener('click', () => {
            // 本身有check就去掉，没有就加上
            if (checkboxBoxEl.classList.contains('check')) {
                checkboxBoxEl.classList.remove('check');
            } else {
                checkboxBoxEl.classList.add('check');
            }
            //最后计算数组的值该是多少
            const resultArr = [];
            [...mianBoxEl.children].map((v, k) => {
                if (v.classList.contains('check')) {
                    resultArr.push(Object.keys(checkboxData[k])[0]);
                }
            });

            if (resultArr.length === 0) {
                // 全取消了，检验是否需要显示
                checkInputCheckboxtBox(inputCheckboxBoxEl);
            } else {
                // 只要还有一个，就可以不显示，去除提示消息
                if (mianBoxEl.classList.contains('prompt')) {
                    mianBoxEl.classList.remove('prompt')
                }
                if (mianBoxEl.classList.contains('luminescence')) {
                    mianBoxEl.classList.remove('luminescence')
                }
                if (footerEl.style.visibility == 'visible') {
                    footerEl.style.visibility = 'hidden';
                }
            }

            //把值传回去
            callBackFun(resultArr);
        });
        mianBoxEl.appendChild(checkboxBoxEl);
    });
    const footerEl = document.createElement('div');
    footerEl.className = 'input-checkbox-footer-box';
    footerEl.innerText = '请选择内容，最少选择一个！';
    contentEl.appendChild(mianBoxEl);
    contentEl.appendChild(footerEl);
    inputCheckboxBoxEl.appendChild(lableEl);
    inputCheckboxBoxEl.appendChild(contentEl);
    return inputCheckboxBoxEl;
}